<template>
	<view>
		<!--  添加新抬头 -->

		<view class="oicing_outer">
			<!--  -->
			<view class="oicing_tit">
				发票信息
			</view>
			<view class="oicing_content ">
				<view class="oicing_line FlexBetween">
					<view class="tit">
						抬头类型
					</view>
					<!-- 单选 -->
					<view class="valuebox FlexAlign">
						<view class="radio_item FlexAlign" v-for="(val, ind) in radioList" @click="headType = val.id"
							v-if="val.show">
							<view class="radiobox FlexRow " :class="{'isActive': headType == val.id}"></view>
							{{val.label}}
						</view>
					</view>
				</view>
				<view class="oicing_line FlexBetween">
					<view class="tit">
						发票类型
					</view>
					<!-- 弹窗选择 -->
					<view class="valuebox FlexAlign placetxt" @click="selectClick">
						{{formInfo.title || '请选择发票类型'}}
						<i class="iconfont icon-xiangyoujiantou"></i>
					</view>
				</view>
				<view class="oicing_line FlexBetween" v-if="headType == 0">
					<view class="tit">
						购方名称
					</view>
					<view class="valuebox FlexAlign placetxt">
						<input type="text" v-model.trim="purchaser_name" placeholder="请输入购方名称">
					</view>
				</view>
				<view class="oicing_line FlexBetween">
					<view class="tit">
						手机号
					</view>
					<view class="valuebox FlexAlign placetxt">
						<input type="text" v-model.trim="formInfo.mobile" placeholder="请输入您的手机号">
					</view>
				</view>


			</view>
			<!--  -->
			<template v-for="(item1, index1) in pContenList">
				<view class="oicing_tit" v-show="item1.show">
					{{item1.title}}
				</view>
				<view class="oicing_content " v-show="item1.show">
					<view class="oicing_line FlexBetween" v-for="(item2, index2) in item1.children">

						<view class="tit">
							{{item2.title}}
						</view>
						<!-- 输入框 -->
						<template v-if="item2.type == 'input'">
							<view class="valuebox FlexAlign placetxt">
								<input type="text" v-model.trim="item2.value" :placeholder="setplaces(item2)">
							</view>
						</template>
					</view>

					<view class="oicing_line blue_text" v-if="item1.otherTxt">
						{{item1.otherTxt}}
					</view>

				</view>
			</template>

			<view class="oicing_content" style="margin: 20rpx 0; ">
				<view class="oicing_line FlexAlign">
					<view class="radio_item FlexAlign" @click="isDefualt = !isDefualt">
						<view class="radiobox FlexRow " :class="{'isActive': isDefualt}"></view>

						<view class="tit">
							设置为默认抬头
						</view>

					</view>

				</view>
			</view>


			<view class="FlexRow defconfirm_btn gradient_bg4 u-m-b-20" @click="$u.throttle(oicinSubmit, 2000)">
				保存
			</view>

			<view class="FlexRow defconfirm_btn hollow" @click="$u.throttle(oicinClose, 2000)">
				取消
			</view>

		</view>




		<!-- 弹窗  -->
		<pupovercoat ref="ref_invoic" :iscustom="true" ptitle="发票类型选择" :ThemeType="4" @saveclick="pupConfirm">
			<template slot="content">
				<view class="Issue_content">
					<view class="invoice_line FlexBetween" @click="formInfo.type = index" v-if="item.show"
						v-for="(item, index) in IssueList">

						<view class="line_left">
							<view class="tit">
								{{item.title}}
							</view>
							<view class="txt" v-if="item.text">
								{{item.text}}
							</view>
						</view>

						<view class="defcheck FlexRow" :class="{ 'isCheck': formInfo.type == index }">
							<i class="iconfont icon-duihao"></i>
						</view>

					</view>

				</view>
			</template>
		</pupovercoat>
		<!--  -->


	</view>
</template>

<script>
	import {
		api_invoice_add,
		api_invoice_edit,
		api_invoice_detail,
		api_invoice_config,
	} from "@/api/xtcapi/invoice.js"
	import {
		External_taitou
	} from "../js/heaup.js"
	import pupovercoat from "@/bundle4/components/pupovercoat.vue"
	import {
		parseStringify,
		testPhone,
	} from "@/bundle4/js/edate.js"
	// import {
	// 	Modalinter,
	// } from "@/api/xtcapi/vehicle.js"
	export default {
		components: {
			pupovercoat,
		},
		data() {
			return {

				pContenList: [],
				isDefualt: false,
				// 

				IssueList: [{
						title: '普通发票',
						id: 0,
						show: true,
					},
					{
						title: '增值税电子普通发票',
						text: '纸质发票开出后将以邮寄形式交付',
						id: 1,
						show: true,
					},
					{
						title: '增值税电子专用发票',
						id: 2,
						show: true,
					},
				],
				// 
				headType: 0, // 抬头类型
				radioList: [{
						label: '个人',
						id: 0,
						show: true,
					},
					{
						label: '企业',
						id: 1,
						show: true,
					},

				],


				purchaser_name: '', //购方名称

				formInfo: {
					type: 0, // 发票类型
					// 0：普通发票，1：电子增值税普通发票，2：电子增值税专用发票
					is_def: '', // 是否默认
					// 1：默认
					title_type: 0, // 抬头类型
					// 0：个人，1：企业
					title: '', // 抬头

					mobile: '', // 联系电话
					email: '', // 邮箱
					duty_num: '', // 税号
					deposit_bank: '', // 开户银行
					bank_account: '', // 银行账号
					bank_address: '', // 银行地址
					traveller_name: '', // 出行人
					traveller_idcard: '', // 出行人身份证
					enterprise_units_title: '', // 企业名称
					enterprise_units_address: '', // 企业地址
					enterprise_units_tel: '', // 企业电话
				},
				c_id: '',
			}
		},
		watch: {
			headType(newVal) {
				this.pContenList[0].show = newVal == 1 ? true : false
			},
		},
		onLoad(options) {
			this.c_id = options.id || ''
			this.initialization()
		},
		methods: {

			setplaces(item2) {
				let {
					placeholder,
					title
				} = item2
				return placeholder ? placeholder : `请输入${title}`
			},
			selectClick() {
				if (this.$refs.ref_invoic) {
					this.$refs.ref_invoic.pupshow = true
				}
			},
			// 页面初始化
			initialization() {
				this.getStConf()

			},
			// 获取页面配置信息
			getStConf() {
				api_invoice_config({}).then(res => {
					// 服务是否开启 
					// if(res.invoice_enabled == 0) {
					// 	Modalinter('该页面功能未开放，敬请期待！')
					// 	return
					// }
					let {
						title_type,
						type
					} = res
					if (title_type.length == 1) {
						this.headType = title_type[0]
					}
					this.setShow(this.radioList, title_type)
					this.setShow(this.IssueList, type)
					this.pContenList = parseStringify(External_taitou)
					if (this.c_id) {
						this.getDetail()
					}
				})
			},
			setShow(arr, list) {
				for (let val of arr) {
					val.show = list.some(v => v == val.id)
				}
			},
			// 获取详情
			getDetail() {
				uni.showLoading({
					title: '加载中',
				})
				api_invoice_detail({
					id: this.c_id
				}).then(res => {
					this.isDefualt = res.is_def ? true : false
					// radioList IssueList
					let {
						title_type,
						type
					} = res

					this.headType = title_type

					if (title_type == 0) { // 个人
						this.purchaser_name = res.title
					}
					for (let item1 of this.pContenList) {
						for (let item2 of item1.children) {
							let {
								key
							} = item2
							if (title_type == 1 && key == 'enterprise_units_title') { // 企业
								item2.value = res.title
							}
							if (res[key]) {
								item2.value = res[key]
							}
						}
					}
					let typeFlag = this.IssueList.some(v => v.id == type && v.show)
					if (typeFlag) {
						this.formInfo.type = res.type
						this.formInfo.title = this.IssueList[res.type * 1].title || ''
					}
					this.formInfo.mobile = res.mobile || ''
					uni.hideLoading()
				})
			},
			oicinSubmit() {
				console.log('oicinSubmit')
				let cobj = parseStringify(this.formInfo)
				if (!cobj.title) {
					this.$toast({
						title: '请选择发票类型'
					})
					return
				}
				let phoneFlag = testPhone(cobj.mobile)
				if (!phoneFlag) {
					this.$toast({
						title: '请输入正确的手机号'
					})
					return
				}
				for (let item1 of this.pContenList) {
					if (!item1.show) continue
					for (let item2 of item1.children) {
						let {
							key,
							isRequired,
							placeholder
						} = item2
						cobj[key] = item2.value || ''
						if (isRequired && !item2.value) {
							this.$toast({
								title: placeholder
							})
							return
						}
					}
				}
				cobj.is_def = this.isDefualt ? 1 : 0
				cobj.title_type = this.headType
				if (this.headType == 0) { // 个人
					cobj.title = this.purchaser_name
				} else if (this.headType == 1) { // 企业
					cobj.title = cobj.enterprise_units_title
					delete cobj.enterprise_units_title
				}
				uni.showLoading({
					title: '加载中'
				})
				if (this.c_id) { // 编辑
					cobj.id = this.c_id
					api_invoice_edit(cobj).then(res => {
						this.$toast({
							title: '修改成功',
						})
						uni.hideLoading()
					})
				} else { // 新建
					api_invoice_add(cobj).then(res => {
						this.$toast({
							title: '创建成功',
						})
						this.turnback()
					})
				}
			},
			turnback() {
				uni.hideLoading()
				setTimeout(() => {
					uni.navigateBack()
				}, 600)
			},
			oicinClose() {
				uni.navigateBack()
			},
			pupConfirm(res) {
				this.formInfo.title = this.IssueList[this.formInfo.type].title || ''
			},



		},
	}
</script>


<style lang="scss" scoped>
	@import "@/bundle4/css/Flex.scss";
	@import "../css/oinvo.scss";

	.blue_text {
		font-size: 24rpx;
		font-weight: 400;
		color: #003232;
		padding: 30rpx 0;
		width: 100%;
		line-height: 36rpx;
	}

	.Issue_content {
		width: 100%;

		.defcheck {}

		.defcheck {
			border-radius: 100%;
			border: 2rpx solid rgba(204, 204, 204, 1);
			background: #fff;

			width: 40rpx;
			height: 40rpx;

			i {
				color: #fff;
				font-size: 28rpx;
			}

			&.isCheck {
				border-color: #003232;
				background: #003232;

				i {
					color: #E6FF28;
				}
			}

		}

		.invoice_line {
			width: 100%;
			min-height: 140rpx;
			border-radius: 12rpx;
			background: #FFFFFF;
			border: 2rpx solid #F1F1F1;
			padding: 35rpx 34rpx 35rpx 24rpx;
			margin-bottom: 18rpx;

			&:last-of-type {
				margin-bottom: 0;
			}

			.line_left {
				.tit {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(38, 38, 38, 1);
					max-width: 450rpx;
				}

				.txt {
					margin-top: 6rpx;
					max-width: 450rpx;
					font-size: 22rpx;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
				}
			}

			.line_radio {}
		}
	}

	.TotalAmount {
		padding: 40rpx 35rpx 30rpx 35rpx;

		.amount_head {
			width: 100%;
			margin-bottom: 26rpx;

			.head_left {
				.tit {

					font-size: 28rpx;
					font-weight: 400;
					color: rgba(38, 38, 38, 1);
					margin-right: 55rpx;
				}

				.price {
					font-size: 28rpx;
					font-weight: 400;

					.num {
						color: rgba(50, 112, 224, 1);
						font-size: inherit;
					}

					.unit {
						color: rgba(102, 102, 102, 1);
						font-size: inherit;
						margin-left: 4rpx;
					}
				}
			}

			.rmore {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(166, 166, 166, 1);

				i {
					color: #999999;
					font-size: 20rpx;
					margin-left: 10rpx;
				}
			}
		}

		.amount_txt {
			width: 100%;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 36rpx;
			color: rgba(166, 166, 166, 1);

		}
	}

	.checkbox {
		width: 34rpx;
		height: 34rpx;
		border-radius: 100%;
		background: #fff;
		border: solid 2rpx #CCCCCC;

		&.ischeck {
			border-color: #003232;
			background: #003232;

			i {
				color: #E6FF28;
			}
		}

		i {
			color: #fff;
			font-size: 24rpx;
		}
	}
</style>